<template>

  <div class="userd">
    <!-- 头部 -->
    <div class="user_top">
      <div class="user_top_part flex">
        <div class="user_top_info flex">
          <!-- <img @click="toData" :src="info.avatar"> -->
          <img :src="info.avatar">
          <p>{{info.nickname}}</p>
        </div>
        <div class="user_top_recharge" @click="toRecharge">
          充值
          <i class="iconfont icon_top icon-arrowright"></i>
        </div>
      </div>
      <ul class="user_top_news flex">
        <!-- <li @click="toNews">消息：0</li>
        <li @click="toBalance">余额：¥0.00</li> -->
        <li>消息：0</li>
        <li>余额：¥{{info.total_pay}}</li>
      </ul>
    </div>
    <div class="user_top_vice"></div>
    <!-- 主体 -->
    <ul class="user_main">
      <li class="flex" @click="toCarLove">
        <div class="user_main_left">
          <i class="iconfont icon_main icon-huodong"></i>
          我的爱车
        </div>
        <i class="iconfont icon_main icon-arrowright"></i>
      </li>
      <li class="flex" @click="toOrder">
        <div class="user_main_left">
          <i class="iconfont icon_main icon-huodong"></i>
          我的订单
        </div>
        <i class="iconfont icon_main icon-arrowright"></i>
      </li>
      <li class="flex" @click="toBuddy">
        <div class="user_main_left">
          <i class="iconfont icon_main icon-huodong"></i>
          我的小伙伴
        </div>
        <i class="iconfont icon_main icon-arrowright"></i>
      </li>
      <li class="flex" @click="toCoupon">
        <div class="user_main_left">
          <i class="iconfont icon_main icon-huodong"></i>
          我的优惠券
        </div>
        <i class="iconfont icon_main icon-arrowright"></i>
      </li>
      <li class="flex" @click="toMemberCard">
        <div class="user_main_left">
          <i class="iconfont icon_main icon-huodong"></i>
          我的会员卡
        </div>
        <i class="iconfont icon_main icon-arrowright"></i>
      </li>
      <!-- <li class="flex" @click="toInvite">
        <div class="user_main_left">
          <i class="iconfont icon_main icon-huodong"></i>
          邀请好友
        </div>
        <i class="iconfont icon_main icon-arrowright"></i>
      </li> -->
      <li class="flex" @click="toRechargeRecord">
        <div class="user_main_left">
          <i class="iconfont icon_main icon-huodong"></i>
          充值记录
        </div>
        <i class="iconfont icon_main icon-arrowright"></i>
      </li>
      <li class="flex" @click="toAddressManage">
        <div class="user_main_left">
          <i class="iconfont icon_main icon-huodong"></i>
          地址管理
        </div>
        <i class="iconfont icon_main icon-arrowright"></i>
      </li>
      <li class="flex" @click="toProblem">
        <div class="user_main_left">
          <i class="iconfont icon_main icon-huodong"></i>
          常见问题
        </div>
        <i class="iconfont icon_main icon-arrowright"></i>
      </li>
      <li class="flex">
        <div class="user_main_left">
          <a style="color: #595757;text-decoration:blink;" href="tel:0510-87830003">
            <i class="iconfont icon_main icon-huodong"></i>联系客服
          </a>
        </div>
        <i class="iconfont icon_main icon-arrowright"></i>
      </li>
      <li class="flex" @click="toPolicy">
        <div class="user_main_left">
          <i class="iconfont icon_main icon-huodong"></i>
          取消订单政策
        </div>
        <i class="iconfont icon_main icon-arrowright"></i>
      </li>
    </ul>
    <ul class="user_main user_main_two">
      <li class="flex" @click="toEnter">
        <div class="user_main_left">
          <i class="iconfont icon_main icon-huodong"></i>
          申请入驻
        </div>
        <div class="user_main_right">
          小伙伴
          <i class="iconfont icon_main icon-arrowright"></i>
        </div>
      </li>
      <li class="flex" @click="toAgent">
        <div class="user_main_left">
          <i class="iconfont icon_main icon-huodong"></i>
          申请城市合伙人
        </div>
        <i class="iconfont icon_main icon-arrowright"></i>
      </li>
    </ul>
    <!-- 底部导航 -->
    <div class="tab">
      <ul class="tab_main flex">
        <li class="tab_li" @click="toIndex">
          <div>
            <i class="iconfont icontab icon-home2"></i>
          </div>
          <p>首页</p>
        </li>
        <li class="tab_li active" @click="toUser">
          <div>
            <i class="iconfont icontab icon-wode2"></i>
          </div>
          <p>我的</p>
        </li>
      </ul>
    </div>
  </div>

</template>


<script>
import axios from 'axios'
import global from '../../../utils/global'
import store from '../../../utils/store'
export default {
  name: 'userd',
  data () {
    return {
      msg: '404',
      info: {},
    }
  },
  // beforeCreate(){
  //   console.log(this.$route.params);
  // },
  mounted(){
    this.getInfo();
    this.$root.share();
  },
  methods: {
    toData(){
      this.$router.push({path:'/data'})
    },
    toRecharge(){
      this.$router.push({path:'/recharge'})
    },
    // toNews(){
    //   this.$router.push({path:'/news'})
    // },
    // toBalance(){
    //   this.$router.push({path:'/balance'})
    // },
    toInvite(){
      this.$router.push({path:'/qrcode'})
    },
    toCarLove(){
      this.$router.push({path:'/carlove'})
    },
    toOrder(){
      this.$router.push({path:'/order'})
    },
    toBuddy(){
      this.$router.push({path:'/buddy'})
    },
    toCoupon(){
      this.$router.push({path:'/coupon'})
    },
    toMemberCard(){
      this.$router.push({path:'/membercard'})
    },
    toRechargeRecord(){
      this.$router.push({path:'/rechargeRecord'})
    },
    toAddressManage(){
      this.$router.push({path:'/addressmanage'})
    },
    toProblem(){
      this.$router.push({path:'/problem'})
    },
    toPolicy(){
      this.$router.push({path:'/policy'})
    },
    toEnter(){
      var that = this;
      axios.get(global.api.index.junior,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
        }
      })
      .then(function(res){
        console.log("toEnter then");
        console.log(res);
        // if (res.data.code == 0) {
        //   // alert(res.data.data.isshow);
        //   if (res.data.data.isshow == 2) {
        //     that.$router.push({path:'/enterOver'})
        //   } else if (res.data.data.isshow == 3) {
        //     alert("您已经是小伙伴了！");
        //   } else if (res.data.data.isshow == 1) {
        //     that.$router.push({path:'/enterRevise'})
        //   } else if (res.data.data.isshow == 0) {
        //     that.$router.push({path:'/enter'})
        //   }
        // }
        // alert(res.data.data.code);
        if (res.data.data.code == 0) {
          // if (res.data.data.isshow == 0) {
            // alert("您的账号有异常，详情请询问管理员！");
          // } else if (res.data.data.isshow == 1) {
            alert("您已经是小伙伴了！");
          // }
        } else if (res.data.data.code == 1) {
          if (res.data.data.isshow == 2) {
            that.$router.push({path:'/enterRevise'})
          } else if (res.data.data.isshow == 3) {
            that.$router.push({path:'/enterOver'})
          }
        } else if (res.data.data.code == -1) {
          that.$router.push({path:'/enter'})
        }

      })
      .catch(function(res){
        console.log("toEnter catch");
        console.log(res);
      })
    },
    toAgent(){
      this.$router.push({path:'/agent'})
    },
    toIndex(){
      this.$router.push({path:'/'})
    },
    toUser(){
      this.$router.push({path:'/user'})
    },
    // 信息获取
    getInfo(){
      var that = this;
      axios.get(global.api.order.customer.user,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
        }
      })
      .then(function(res){
        console.log("ordering then");
        console.log(res);
        if (res.data.error == 0) {
          that.info = res.data.member;
        }
      })
      .catch(function(res){
        console.log("ordering catch");
        console.log(res);
      })
    },
  }
}
</script>

<style scoped>
  .userd{}
  /* 头部 */
  .user_top{
    background: -webkit-linear-gradient(#2ecc80, #00D4CB); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#2ecc80, #00D4CB); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#2ecc80, #00D4CB); /* Firefox 3.6 - 15 */
    background: linear-gradient(#2ecc80, #00D4CB); /* 标准的语法（必须放在最后） */
    color: #fff;
    width: 100%;
    overflow: hidden;
  }
  .user_top_part{
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0 1rem;
  }
  .user_top_info{
    justify-content: flex-start;
    align-items: center;
  }
  .user_top_info img{
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    /*padding-left: 1.5rem;*/
    margin:0 0.5rem 0 1rem;
  }
  .user_top_info p{
    font-size: 1.05rem;
    max-width: 10rem;
    height: 1.5rem;
    overflow: hidden;
  }
  .user_top_recharge{
    width: 4.5rem;
    /*height: 1.4rem;*/
    line-height: 1.4rem;
    border-radius: 0.7rem;
    margin-right: -0.7rem;
    background-color: #fff;
    color: #595757;
    font-size: 0.85rem;
  }
  .icon_top{
    font-size: 0.8rem;
  }
  .user_top_news{
    padding-bottom: 0.5rem;
  }
  .user_top_news li {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }
  .user_top_news li:first-child{
    border-right: 1px solid #fff;
  }
  .user_top_vice{
    width: 100%;
    height: 0.6rem;
    margin-top: -0.2rem;
    border-bottom: 1px solid #B3B3B4;
    box-shadow: 0 0.6rem 0 0 #E5E5E6;
    margin-bottom: 0.6rem;
  }
  /* 主体 */
  .user_main{
    box-shadow: 0 0.6rem 0 0 #E5E5E6;
    margin-bottom: 0.6rem;
  }
  .user_main li{
    justify-content: space-between;
    align-items: center;
    line-height: 3rem;
    border-bottom: 1px solid #B3B3B4;
    padding: 0 0.7rem;
  }
  .user_main_left{
    color: #595757;
  }
  .user_main_right{
    color: #595757;
  }
  .icon_main{}
  .user_main_two{
    margin-bottom: 5rem;
    box-shadow: 0 0rem 0 0 #fff;
  }
  /*底部导航*/
  .tab{
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
  }
  .tab_main{
    border-top: 1px solid #797979;
    box-sizing: border-box;
    padding: 0.25rem 0 0;
    /*height: 5rem;*/
  }
  .tab_main .active{
    color: #2ECC80;
  }
  .tab_li{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    color: #B5B5B5;
  }
  .tab_li p{
    font-size: 0.9rem;
  }
  .icontab{
    font-size: 1.5rem;
  }
</style>
<style>
  ul,li,div,a,p,span{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
  .flex{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
</style>
